
import { Row, Col } from 'antd';
import { Menu, Icon } from 'antd';
import React from 'react';
import model from '../model';
import { Route, Link } from "react-router-dom";
/**三级页面 */
export const Mysql = (props) => {
    return <div>Mysql</div>
}
/**三级页面 */
export const Oracle = (props) => {
    return <div>Oracle</div>
}
/**三级页面 */
export const Db2 = (props) => {
    return <div>Db2</div>
}
/**二级页面 */
export const Index = (props) => {
    return <div>主页</div>
}

/**二级页面 */
export const Dbs = (props) => {
    const menus = model.dbs
    const routes = [
        { path: '/db/mysql/', component: Mysql },
        { path: '/db/oracle/', component: Oracle },
        { path: '/db/db2/', component: Db2 }
    ]
    return (
        <div>
            <Row>
                <Col span={12}>
                    <Menu mode="inline" defaultSelectedKeys={['1']}>
                        {
                            menus.map((val, i) => {
                                return (
                                    <Menu.Item key={i}>
                                        <Icon type={val.icon} /><span><Link to={val.path}>{val.name}</Link></span>
                                    </Menu.Item>
                                )
                            })
                        }
                    </Menu>
                </Col>
                <Col span={12}>
                    <h3>数据库</h3>
                    {routes.map((item, i) => <Route path={item.path} key={i} component={item.component} />)}
                </Col>
            </Row>
        </div>
    )
}